<template>
  <div class="item-box">
    <!-- <div class="heard hw-box-style-flex hw-box-style-flex-r-center">
      <p class="heard-title1">全局设置</p>
    </div> -->
    <t-collapse expand-icon-placement="right" :defaultExpandAll="true" v-if="configList.colorShow">
      <div class="item-content" v-if="templateColorList.length > 0">
        <t-collapse-panel :value="1">
          <template #header>
            <div class="hw-box-style-flex hw-box-style-flex-r-center">
              <span class="title2">颜色设置</span>
            </div>
          </template>
          <template #default>
            <t-row>
              <t-col v-for="item in templateColorList" :key="item.id">
                <div
                  @click="setColor(item)"
                  class="color-box hw-flex-style-c-c-c hw-click-cursor"
                  :class="{ 'color-border': store.styleInfo.colorType == item.id }"
                >
                  <img :src="item.img + '?imageView2/3/format/webp'" alt="" />
                  <span>{{ item.name }}</span>
                  <img
                    v-if="store.styleInfo.colorType == item.id"
                    class="item-active"
                    src="https://static.jiyi.show/assets/img/active.png"
                    alt=""
                  />
                </div>
              </t-col>
            </t-row>
          </template>
        </t-collapse-panel>
      </div>
      <div class="item-content item-content-br">
        <t-collapse-panel :value="2" v-if="configList.sizeShow">
          <template #header>
            <div class="hw-box-style-flex hw-box-style-flex-r-center">
              <span class="title2">字体修改</span>
            </div>
          </template>
          <template #default>
            <t-row>
              <t-col :span="12">
                <div class="font-box hw-box-style-flex hw-box-style-flex-clm">
                  <span>标题字体</span>
                  <t-select @change="changeFont" v-model="parmas.fontFamily" placeholder="请选择标题字体">
                    <t-option :key="item.value" :label="item.name" :value="item.value" v-for="item in fontFamilyList" />
                  </t-select>
                </div>
              </t-col>
              <t-col :span="12">
                <div class="font-box hw-box-style-flex hw-box-style-flex-clm">
                  <span>正文字体</span>
                  <t-select @change="changeFont1" v-model="parmas.textFamily" placeholder="请选择标题字体">
                    <t-option :key="item.value" :label="item.name" :value="item.value" v-for="item in fontFamilyList" />
                  </t-select>
                </div>
              </t-col>
              <!-- <t-col :span="12">
                <div class="font-box hw-box-style-flex hw-box-style-flex-clm">
                  <span>字体大小</span>
                  <div class="slider-box">
                    <t-slider
                      :min="0"
                      :max="2"
                      v-model="parmas.fontSize"
                      :show-tooltip="true"
                      :marks="marks1"
                      @change="setChange"
                    />
                  </div>
                </div>
              </t-col> -->
            </t-row>
          </template>
        </t-collapse-panel>
      </div>
      <div class="item-content item-content-br" v-if="templateStyleimg.length > 0 && configList.styleShow">
        <t-collapse-panel :value="3">
          <template #header>
            <div class="hw-box-style-flex hw-box-style-flex-r-center">
              <span class="title2">风格设置</span>
            </div>
          </template>
          <template #default>
            <t-row>
              <t-col v-for="item in templateStyleimg" :key="item.id">
                <div
                  @click="setStyleType(item)"
                  class="hw-click-cursor style-box"
                  :class="{ 'color-border': store.styleInfo.styleType === item.id }"
                >
                  <img :src="item.banner + '?imageView2/3/format/webp'" alt="" />
                  <img
                    v-if="store.styleInfo.styleType == item.id"
                    class="item-active"
                    src="https://static.jiyi.show/assets/img/active.png"
                    alt=""
                  />
                </div>
              </t-col>
            </t-row>
          </template>
        </t-collapse-panel>
      </div>
    </t-collapse>
    <panelItem2></panelItem2>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getGlobalColor, getGlobalTabList } from '@/utils/templateEdit';
import { MessagePlugin } from 'tdesign-vue-next';
import { urls } from '@/utils/request/upload';
import { ref, reactive, watch, computed, onMounted } from 'vue';
import { heards, url } from '@/utils/request/upload';
import { useRouter, useRoute } from 'vue-router';
import {
  colorList8,
  styleimg8,
  colorList10,
  styleimg10,
  colorList9,
  styleimg9,
  colorList4,
  colorList5,
  colorList6,
  styleimg4,
  styleimg5,
  colorList,
  colorInfo,
  fontSizeList,
  fontFamilyList,
  styleimg,
  colorList11,
} from '../../data';
import { useProjectStore } from '@/store';
import panelItem2 from './panelItem2.vue';
const store = useProjectStore();
const route = useRoute();
const router = useRouter();
const uploadAllFilesInOneRequest = ref(false);
const templateColorList = ref([]);
const templateStyleimg = ref([]);
const configList = ref({
  colorShow: true, //颜色展示
  sizeShow: true, //字体选择展示
  styleShow: true, //风格样式
});
// getGlobalTabList

const marks1 = {
  0: '较小',
  1: '默认',
  2: '较大',
};
console.log(store.styleInfo.colorType, 12312312312, colorList6);

const parmas = reactive({
  value: 0,
  fontSize: 1,
  fontFamily: 'SourceHanSerifCN',
  textFamily: 'SourceHanSerifCN',
});
parmas.fontSize = store.styleInfo.sizeType;
parmas.fontFamily = store.styleInfo.fontFamily;
parmas.textFamily = store.styleInfo.textFamily;
const init = () => {
  let list = getGlobalColor(route.meta.templateId); //获取颜色以及样式配置表
  templateColorList.value = list.templateColorList;
  templateStyleimg.value = list.templateStyleimg;
  // switch (route.meta.templateId) {
  //   case 410276336631877:
  //     templateColorList.value = colorList4;
  //     templateStyleimg.value = styleimg4;
  //     break;
  //   case 666:
  //     templateColorList.value = colorList6;
  //     break;
  //   case 1997:
  //     templateColorList.value = colorList5;
  //     templateStyleimg.value = styleimg5;
  //     break;
  //   case 99999:
  //     templateColorList.value = colorList9;
  //     templateStyleimg.value = styleimg9;
  //     break;
  //   case 888:
  //     templateColorList.value = colorList8;
  //     templateStyleimg.value = styleimg8;
  //     break;
  //   case 1010:
  //     templateColorList.value = colorList10;
  //     templateStyleimg.value = styleimg10;
  //     break;
  //   case 123456789:
  //     templateColorList.value = colorList11;
  //     templateStyleimg.value = [];
  //     break;
  //   default:
  //     templateColorList.value = colorList;
  //     templateStyleimg.value = styleimg;
  //     break;
  // }
};

const onSuccess1 = (e: any) => {
  //   formData.backImage = e.response.data;
};
const handleFail = (e: any) => {};
const pathBlank = () => {
  // /prijectMenu/plan
  router.push({ path: '/prijectMenu/plan', query: { projectId: localStorage.getItem('projectId') } });
};
const setColor = (e: colorInfo) => {
  store.setColor(e);
  MessagePlugin.success('更换成功');
};
const setChange = () => {
  store.setFontsize(fontSizeList[parmas.fontSize]);
  // console.log();
};
const changeFont = (e: any) => {
  store.setFontFamily(e, 1);
};
const changeFont1 = (e: any) => {
  store.setFontFamily(e, 2);
};
const setStyleType = (e: any) => {
  // console.log(e, 123);
  store.setStypeType(e);
};
onMounted(() => {
  configList.value = getGlobalTabList();
  init();
});
window.onpopstate = function (event) {
  // 网址变化时的处理逻辑
  // configList.value = getGlobalTabList();
  // init();
};
watch(
  () => route.meta,
  () => {
    let list = getGlobalColor(route.meta.templateId); //获取颜色以及样式配置表
    templateColorList.value = list.templateColorList;
    templateStyleimg.value = list.templateStyleimg;
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
@import './index.less';
.item-content {
  padding: 0;
  background: #ffffff;

  // box-shadow: inset 1px 0px 0px 0px #f0f0f0;
  :deep(.t-collapse-panel__content) {
    padding-left: 0;
    padding-bottom: 4px;
  }
}
// border-bottom: 1px solid #f0f0f0;
.item-content-br {
  border-bottom: 1px solid #f0f0f0;
}
:deep(.t-collapse-panel) {
  // box-shadow: inset 0px -1px 0px 0px #f0f0f0;
}
.color-box {
  position: relative;
  width: 146px;
  height: 124px;
  // padding: 4px;
  background: #ffffff;
  // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px -1px 2px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  border: 1px solid #f5f5f5;
  background: #fafafa;
  &:hover {
    border: 1px solid #e62b17;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px -1px 2px 0px rgba(0, 0, 0, 0.06);
  }
  img {
    height: 92px;
    width: calc(100% - 0px);
    border-radius: 4px;
  }
  .item-active {
    position: absolute;
    bottom: -1px;
    right: 0px;
    width: 32px;
    height: 32px;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.59);
    line-height: 22px;
    margin-top: 4px;
    margin-bottom: 4px;
  }
}

.item-content {
  // box-shadow: inset 1px 0px 0px 0px #f0f0f0;
}
.font-box {
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  padding-right: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  // margin-top: 16px;
  span {
    margin-bottom: 8px;
  }
}
.slider-box {
  padding: 0 16px;
  padding-left: 0;
  width: 100%;
  height: 40px;
  padding-right: 3px;
  :deep(.t-slider__mark-text) {
    min-width: 26px;
  }
  :deep(.t-slider__track) {
    color: #d2ad77;
    background: #d2ad77;
  }
  :deep(.t-slider__button) {
    border-color: #d2ad77;
    // background: #d2ad77;
  }
}
.style-box {
  position: relative;
  display: flex;
  width: 146px;
  height: 124px;
  // padding: 18px 26px;
  // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 2px 4px 0px rgba(0, 0, 0, 0.08),
  //   0px -1px 2px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  border: 1px solid #f5f5f5;
  background: #fafafa;
  &:hover {
    border: 1px solid #e62b17;
    border-radius: 4px;
    background: #fafafa;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px -1px 2px 0px rgba(0, 0, 0, 0.06);
  }
  img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
  }
  .item-active {
    position: absolute;
    bottom: -1px;
    right: -0px;
    width: 32px;
    height: 32px;
  }
}
.color-border {
  border: 1px solid #d2ad77;
  height: 124px;

  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px -1px 2px 0px rgba(0, 0, 0, 0.06);
}
.title2 {
  color: rgba(0, 0, 0, 0.8);
  font-family: 'PingFang SC';
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.t-col {
  margin-top: 0px;
  margin-bottom: 16px;
}
:deep(.t-collapse-panel__content) {
  padding-bottom: 4px;
}
:deep(.t-select__wrap) {
  background: #343231;
  border: none;
}
:deep(.t-input.t-is-readonly) {
  background: #343231;
}
:deep(.t-input) {
  border: none;
}
:deep(.t-input__inner) {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 24px;
}
.font-box {
  :deep(.t-select .t-fake-arrow) {
    color: rgba(255, 255, 255, 0.38);
  }
}
.color-border {
  border: 1px solid #e62b17 !important;
  border-color: #e62b17 !important;
}
.heard {
  width: 50%;
}
:deep(.t-collapse) {
  // height: calc(100vh - 48px);
  // overflow: auto;
}
</style>
